<!-- 表格 -->
<template>
  <el-table
    ref="tableRef"
    v-loading="tableLoading"
    :data="tableData"
    :border="true"
    style="width: 100%"
    :highlight-current-row="highlightFlag"
    :max-height="maxHeight"
    @row-click="rowClick"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="selectionFlag" type="selection" width="55" />
    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item?.width"
      :fixed="item?.fixed"
      :formatter="item?.formatter"
      show-overflow-tooltip
    />
    <el-table-column
      v-if="operation"
      label="操作"
      :min-width="operationWidth"
      :fixed="operationFixed"
    >
      <template #default="scope">
        <slot name="operate" :scope-data="scope" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { defineComponent, ref, watch, computed, nextTick } from 'vue'
export default defineComponent({
  name: 'BasicTable',
  components: {},
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 操作按钮
    operation: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 操作列宽度
    operationWidth: {
      type: [String, Number],
      default: () => {
        return 100
      }
    },
    tableLoading: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: [Number, String],
      default: () => {
        return 400
      }
    },
    highlightFlag: {
      type: Boolean,
      default: false
    },
    selectionFlag: {
      type: Boolean,
      default: false
    },
    operationFixed: {
      type: [String, Boolean],
      default: false
    }
  },
  // const emits =defineEmits(['update:currentRow'])
  emits: ['update:currentRow', 'getMultipleSelectionRow'],
  setup(props, { emit }) {
    const tableRef = ref(null)
    const tableMaxHeight = computed(() => {
      return props.maxHeight
    })

    watch(
      () => props.tableData,
      () => {
        if (!props.highlightFlag) return
        nextTick(() => {
          tableRef.value.setCurrentRow(props.tableData[0])
          emit('update:currentRow', props.tableData[0])
        })
      }
    )

    //当前行改变
    const rowClick = (currentRowData) => {
      emit('update:currentRow', currentRowData)
    }

    const handleSelectionChange = (val) => {
      emit('getMultipleSelectionRow', val)
    }
    return {
      tableRef,
      rowClick,
      tableMaxHeight,
      handleSelectionChange
    }
  }
})
</script>

<style lang="scss" scoped></style>
